<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!--<meta name="renderer" content="webkit"> 默认渲染内核-->
		<title></title>
		<link rel="stylesheet" type="text/css" href="static/admin/css/pintuer.css"/>
		<link rel="stylesheet" type="text/css" href="static/admin/css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="static/admin/css/media.css"/>
		<link rel="stylesheet" type="text/css" href="static/admin/css/animation.css"/>
		<link rel="stylesheet" type="text/css" href="static/admin/css/zTree/zTreeStyle.css"/>
		<link rel="stylesheet" type="text/css" href="static/admin/css/zTree/tree.css"/>
		<link rel="stylesheet" type="text/css" href="static/admin/css/themes/metro/easyui.css"/>
		<script src="static/admin/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/admin/js/jquery.ztree.core-3.5.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/admin/js/pintuer.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/admin/js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/admin/js/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/admin/js/jquery.easing.1.3.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			/* 全屏自适应布局  */
			html,body{width:100%;height:100%;overflow:hidden;margin:0;}
			html{_height:auto;_padding:100px 0 50px;}
			.layout-north,.layout-center,.layout-south{position:absolute;z-index:1;left:0;}
			.layout-north,.layout-south{width:100%;}
			.layout-center{top:64px;bottom:0px;_height:100%;}
			.layout-north{top:0;z-index:1;height:64px;background: #3C4145;border-bottom: 1px solid #76B2D4;}
			.layout-center{_position:relative;left:0px;right:0;_top:0;_left:0;_margin-left:0px;background: #F4F4F4;background: #EAEDF1;}
			.layout-south{bottom:0;height:50px;}
			.logo{
				width: 360px;
				height: 64px;
				margin-left: 0px;
				background: url(static/admin/img/admin-logo.png) no-repeat;
			}
			
			.div-center{
				width: 600px;
				height: auto;
				position: absolute;
				left: 50%;
				top: -500px;
				padding: 0 10px 20px 10px;
			}
			
			.item-row{
				width: 100%;
				float: left;
			}
			.item{
				margin-top: 20px;
				float: left;
				margin-right: 4px;
				width: 100px;
				height: 100px;
				display: inline-block;
				background: #94C444;
				overflow: visible;
				position: relative;
				z-index: 1;
				zoom: 1;
				white-space: normal;
			}
			.item .icon img{
				width: 50px;
				height: 50px;
				margin:10px 0 10px 30px;
			}
			.item .label{
				height: 28px;
				text-align: center;
				font-size: 14px;
				font-family: Microsoft YaHei, \5FAE\8F6F\96C5\9ED1, "Hiragino Sans GB", "Hiragino Sans GB W3", SimHei, \9ED1\4F53;
				color: white;
			}
			.item-row .red {
				background: red;
			}
			
			#data-show{
				z-index: 4;
				width: 200px;
				height: 200px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top:-100px;
				margin-left:-100px;
				display: none;
			}
			.bg-cc{
				background: #DFDFDF;
			}
			#data-show .d-s-title{
				height: 40px;
				border-bottom:1px solid #DEDEDE;
				display: none;
				background: #3398DC;
			}
			#data-show .d-s-title .d-s-close{
				float: right;
				cursor: pointer;
				margin: 8px;
			}
			#data-show .d-s-title .d-s-up{
				float: right;
				cursor: pointer;
				margin: 8px 0 8px 0;
			}
			/*奇可可grid*/
			.qikeke-grid {
				border:none;
				font: 10pt arial,helvetica,sans-serif;
			}
			.qikeke-grid td {
			   text-align: center;
			   font: 100% arial,helvetica,sans-serif;
			   height: 24px;
			   padding: 10px 4px;
			   border: 1px solid #F5F5F5;
			   border-right: 0;
			   border-left: 0;
			   padding-left: 5px;
			}
			.qikeke-grid td input {
				min-width:134px;
			}
			
			.qikeke-grid {
			    border-collapse: collapse;
			    width: 100%;
			}
			.qikeke-grid th {
			    background: none repeat scroll 0 0 #E7F3FE;
			    border: 1px solid #EAEAEA;
			    height: 27px;
			    line-height: 27px;
			    padding-left: 5px;
			}
		</style>
	</head>
	<body>
		<div class="layout-north">
    		<div class="logo-box">
    			<div class="logo">
    				
    			</div>
    		</div>
		</div>
		
		<div class="layout-center">
			
			<div class="div-center">
			  	<div>
			  		<div class="nav-menu-list">
			  			<div class="item-row">
				  			<div class="item" onmouseenter="$(this).css('background','#787878');" onmouseleave="$(this).css('background','#94C444');">
				  				<a href="javascript:void(0);" onclick="item_click(this);">
					  				<div class="icon">
					  					<img alt="图标" title="功能提示" src="static/admin/img/other/client.png" />
					  				</div>
					  				<div class="label">
					  					权限管理
					  				</div>
				  				</a>
				  			</div>
				  			<div class="item" onmouseenter="$(this).css('background','#787878');" onmouseleave="$(this).css('background','#94C444');">
				  				<a href="#">
					  				<div class="icon">
					  					<img alt="图标" title="功能提示" src="static/admin/img/other/log-manager.png" />
					  				</div>
					  				<div class="label">
					  					日志管理
					  				</div>
				  				</a>
				  			</div>
				  			<div class="item" onmouseenter="$(this).css('background','#787878');" onmouseleave="$(this).css('background','#94C444');">
				  				<a href="#">
					  				<div class="icon">
					  					<img alt="图标" title="功能提示" src="static/admin/img/other/communication.png" />
					  				</div>
					  				<div class="label">
					  					通讯录
					  				</div>
				  				</a>
				  			</div>
				  			<div class="item" onmouseenter="$(this).css('background','#787878');" onmouseleave="$(this).css('background','#94C444');">
				  				<a href="#">
					  				<div class="icon">
					  					<img alt="图标" title="功能提示" src="static/admin/img/other/attendance.png" />
					  				</div>
					  				<div class="label">
					  					考勤管理
					  				</div>
				  				</a>
				  			</div>
				  			<div class="item" onmouseenter="$(this).css('background','#787878');" onmouseleave="$(this).css('background','#94C444');">
				  				<a href="#">
					  				<div class="icon">
					  					<img alt="图标" title="功能提示" src="static/admin/img/other/diary.png" />
					  				</div>
					  				<div class="label">
					  					工作日记
					  				</div>
				  				</a>
				  			</div>
			  			</div>
			  			<div class="item-row">
				  			<div class="item" onmouseenter="$(this).css('background','#787878');" onmouseleave="$(this).css('background','#94C444');">
				  				<a href="#">
					  				<div class="icon">
					  					<img alt="图标" title="功能提示" src="static/admin/img/other/results.png" />
					  				</div>
					  				<div class="label">
					  					绩效管理
					  				</div>
				  				</a>
				  			</div>
				  			<div class="item" onmouseenter="$(this).css('background','#787878');" onmouseleave="$(this).css('background','#94C444');">
				  				<a href="#">
					  				<div class="icon">
					  					<img alt="图标" title="功能提示" src="static/admin/img/dounine-icon.png" />
					  				</div>
					  				<div class="label">
					  					每日日报
					  				</div>
				  				</a>
				  			</div>
				  			<div class="item" onmouseenter="$(this).css('background','#787878');" onmouseleave="$(this).css('background','#94C444');">
				  				<a href="#">
					  				<div class="icon">
					  					<img alt="图标" title="功能提示" src="static/admin/img/dounine-icon.png" />
					  				</div>
					  				<div class="label">
					  					每日日报
					  				</div>
				  				</a>
				  			</div>
				  			<div class="item" onmouseenter="$(this).css('background','#787878');" onmouseleave="$(this).css('background','#94C444');">
				  				<a href="#">
					  				<div class="icon">
					  					<img alt="图标" title="功能提示" src="static/admin/img/dounine-icon.png" />
					  				</div>
					  				<div class="label">
					  					每日日报
					  				</div>
				  				</a>
				  			</div>
				  			
			  			</div>
			  		</div>
			  	</div>
			</div>


			<div id="data-show">
				<div class="d-s-title">
					<ul>
						<li class="d-s-close"><img onclick="close_show_data(this);" src="static/admin/img/icon/icon-close.png" /></li>
						<li class="d-s-up"><img status="up" onclick="up_show_data(this);" src="static/admin/img/icon/icon-up.png" /></li>
					</ul>
				</div>
				<div class="insert-data" id="insert-data" style="display: none;">
					
				</div>
			</div>
		</div>

	</body>
		
	<script type="text/javascript">
		$(function(){
			var $div_center = $('.div-center');
			$div_center.css({
				'margin-left':-parseInt($div_center.width())/2
			});
			$div_center.animate({
				'top':140
			},700);
			//item_click($('.item-row .item:first')[0]);
		});
		
		function item_click(self){
			$("#data-show").addClass('bg-cc').show().animate({
				'width':'100%',
				'height':'100%',
				'left':0,
				'top':0,
				'margin-top':0,
				'margin-left':0
			},function(){
				$.get('model/rbac/nav-menu.html',function(){
					$('.insert-data').html(arguments[0]).show();
					$("#data-show").removeClass('bg-cc');
				});
				$('.div-center').css({
					'left': '50%',
					'top': '-500px'
				});
				$(this).find(".d-s-title").show();
			});
		}
		
		function close_show_data(self){
			$(".layout-center").css({
				'margin-top':0
			});
			$('.d-s-up img').attr('status','up').attr('src','static/admin/img/icon/icon-up.png');
			$("#data-show .d-s-title").hide();
			$("#data-show").addClass('bg-cc').animate({
				'width':'40px',
				'height':'40px',
				'left':'50%',
				'top':'50%',
				'margin-top':'-80px',
				'margin-left':'-20px'
			},300,function(){
				$(this).removeClass('bg-cc').hide();
			});
			$('.div-center').animate({
				'top':140
			},700);
			$('.insert-data').empty().hide();
		}
		
		function up_show_data(self){
			if($(self).attr('status')=='up'){
				$(self).attr('status','down').attr('src','static/admin/img/icon/icon-down.png');
				$(".layout-center").animate({
					'margin-top':-64
				});
			}else{
				$(self).attr('status','up').attr('src','static/admin/img/icon/icon-up.png');;
				$(".layout-center").animate({
					'margin-top':0
				});
			}
		}

	</script>
	
	
	<script type="text/javascript">
		$(function(){
			$.post('http://192.168.1.200/home/test.html',function(data){
				console.info(data);
			});
		});
	</script>
</html>
